<template>

  <el-row :gutter="20">

    <el-col :span="24">
      <user-banner />
    </el-col>
    <el-col :span="24">

      <el-card style="margin-top: -5px; padding-top: 50px">
        <el-tabs v-model="activeTab" class="uc-tab" @tab-click="tabClick">
          <el-tab-pane label="用户信息" name="first">

            <el-form label-width="80px">
              <el-form-item label="用户编号">
                {{ userData.id }}
              </el-form-item>
              <el-form-item label="登录账号">
                {{ userData.userName }}
              </el-form-item>
              <el-form-item label="真实姓名">
                {{ userData.realName }}
              </el-form-item>
              <el-form-item label="所属部门">
                {{ userData.deptCode_dictText }}
              </el-form-item>

            </el-form>

          </el-tab-pane>
          <el-tab-pane label="修改密码" name="second">

            <el-form ref="postForm" :model="postForm" label-width="80px">
              <el-form-item label="原始密码">
                <el-input v-model="postForm.oldPassword" type="password" :show-password="true" />
              </el-form-item>
              <el-form-item label="新的密码">
                <el-input v-model="postForm.password" type="password" :show-password="true" />
              </el-form-item>
              <el-form-item label="确认密码">
                <el-input v-model="postForm.confirm" type="password" :show-password="true" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="handleUpdate">确认修改</el-button>
              </el-form-item>

            </el-form>

          </el-tab-pane>

        </el-tabs>
      </el-card>

    </el-col>
  </el-row>

</template>

<script>

import { mapGetters } from 'vuex'

import { findInfo, updatePass } from '@/api/sys/user/user'
import UserBanner from './components/UserBanner'

export default {
  components: { UserBanner },
  computed: {
    ...mapGetters([
      'token',
      'realName'
    ])
  },
  data() {
    return {

      activeTab: 'first',
      userData: {},
      postForm: {
        oldPassword: '',
        password: '',
        confirm: ''
      }
    }
  },

  created() {
    this.handleUserInfo()

    const active = localStorage.getItem('uc:tab:active')
    if (active != null && active !== '') {
      this.activeTab = active
    }
  },
  methods: {

    tabClick(e) {
      // 保存状态
      localStorage.setItem('uc:tab:active', e.name)
    },

    handleUserInfo() {
      findInfo(this.token).then(res => {
        this.userData = res.data
      })
    },

    async handleUpdate() {
      if (this.postForm.oldPassword === '') {
        this.$message({
          message: '旧密码不能为空',
          type: 'warning'
        })

        return
      }

      if (this.postForm.password === '' || this.postForm.password.length < 6) {
        this.$message({
          message: '新密码不为空且大于5个字符',
          type: 'warning'
        })

        return
      }

      if (this.postForm.password !== this.postForm.confirm) {
        this.$message({
          message: '两次密码输入不一致！',
          type: 'warning'
        })

        return
      }

      updatePass(this.postForm).then(() => {
        this.$notify({
          title: '成功',
          message: '用户密码修改成功，请重新登录！！',
          type: 'success',
          duration: 2000
        })

        this.logout()
      })
    }
  }
}
</script>

<style scoped>

  .el-tab-pane{
    padding-top: 20px;
  }
</style>
